<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">分面统计表</div>
      <div class="sub_title">一组数据切割为多个图表</div>
      <slot name="title"></slot>
    </div>
    <div id="facet_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "facet_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json')
      .then(res => res.json())
      .then(data => {

        this.chart.data(data);
        // 是否同步度量，相同坐标系可同步度量
        this.chart.scale({
          carat: {
            sync: true
          },
          price: {
            sync: true
          },
          clarity: {
            sync: true
          }
        });
        //  将一组数据按照 cut 切割成若干的子集。每个子集数据分配给对应的子 view 容器
        // 分面的内置类别有：
        // rect	默认类型，指定 2 个维度作为行列，形成图表的矩阵。
        // list	指定一个维度，可以指定一行有几列，超出自动换行。
        // circle	指定一个维度，沿着圆分布。
        // tree	指定多个维度，每个维度作为树的一级，展开多层图表。
        // mirror	指定一个维度，形成镜像图表。
        // matrix	指定一个维度，形成矩阵分面。
        this.chart.facet('list', {
          // 按哪些字段进行拆分
          fields: [ 'cut' ],
          // 是否展示标题
          showTitle:true,
          // 指定每行的列
          cols:3,
          // 内边距
          padding:[15,0],
          // 配置每一个 view 
          eachView(view,facet) {
            console.log(facet)
            view.point()
              .position('carat*price')
              .color('clarity')
              .shape('circle')
              .style({ fillOpacity: 0.3, stroke: null })
              .size(3);
          }
        });

        this.chart.render();
      })
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData(newValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>